<template>
    <el-container class="home-container" style="height: 100%;">
        <!-- 头部 -->
        <el-header>
            <div>
                <img src="@/assets/logo-1.jpg" alt="logo" class="logo_1">
                <span class="title_1">中药材电商后台管理系统</span>
            </div>
            <span class="user-name" style="margin-right: -876px;">你好，{{ username }}</span>
            <el-button type="info" @click="logout">退出登录</el-button>
        </el-header>
        <el-container>
            <el-aside :width="isCollapse ? '64px' : '200px'">
                <el-tooltip :content="isCollapse ? '点击展开左侧菜单' : '点击折叠左侧菜单'" placement="right">
                    <div class="toggle-button" @click="toggleCollapse">|||</div>
                </el-tooltip>
                <!-- 侧边栏菜单区域 -->
                <el-menu active-text-color="#ffffff" background-color="#1a1f2e" text-color="#a0aec0" :unique-opened="true" :collapse="isCollapse" 
                :collapse-transition="false" :default-active="activePath" :router="true">
                    <!-- 一级菜单 -->
                    <el-sub-menu :index="item.id.toString()" v-for="item in menuList" :key="item.id">
                        <!-- 一级菜单的模板区域 -->
                        <template #title>
                            <!-- 图标 -->
                            <img :src="iconObj[item.id]" class="menu-icon" alt="menu icon">
                            <!-- 文本 -->
                            <span>{{ item.name }}</span>
                        </template>
                        
                        <!-- 二级菜单 -->
                        <el-menu-item :index="subItem.url" v-for="subItem in item.children" :key="subItem.id" @click="saveNavstate(subItem.url)">
                            <el-icon><IconMenu /></el-icon>
                            <span>{{ subItem.name }}</span>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-main>
                <!-- 路由占位符 -->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>

</template>
  
  <script setup>
  import { onMounted, ref } from 'vue'
  import axios from '@/utils/http'
  import '../components/home.scss'
  import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

// 导入图片资源
import defaultAvatar from '@/assets/默认头像.png'
import spaceIcon from '@/assets/体积.png'
import goodsIcon from '@/assets/商品.png'
import documentIcon from '@/assets/计费管理系统.png'
import reportIcon from '@/assets/报表.png'

const iconObj = {
    '1': defaultAvatar,
    '2': spaceIcon,
    '3': goodsIcon,
    '4': documentIcon,
    '5': reportIcon
}
const activePath = ref('')
const isCollapse = ref(false)
const toggleCollapse = () => {
    isCollapse.value = !isCollapse.value
}
const menuList = ref([])
const username = ref('')
  // 退出登录
  const logout = () => {
    window.sessionStorage.clear()
    window.location.href = '/login'
  }
  
  // 保存当前链接导航状态
  const saveNavstate = (url) => {
    window.sessionStorage.setItem('navState', url)
    console.log("地址为：",url)
    activePath.value = url
  }
  // 获取所有的菜单
  const getMenuList = async () => {
    const {data:res} = await axios.get('/menu/')
    if (res.code !== 200) {
        return ElMessage.error(res.message)
    }
    
    // 获取用户权限
    const userFunctions = JSON.parse(sessionStorage.getItem('permissions') || '[]')
    
    // 定义菜单权限映射
    const menuPermissionMap = {
      '用户管理': ['添加用户功能', '删除用户功能', '修改用户功能', '分配角色功能'],
      '权限管理': ['添加角色功能', '删除角色功能', '编辑角色功能', '分配权限功能'],
      '商品管理': ['添加商品功能', '修改商品功能', '删除商品功能', '添加分类功能', '编辑分类功能', '删除分类功能'],
      '订单管理': ['修改地址功能', '商品发货功能'],
      '数据统计': ['查看数据']
    }
    
    // 过滤菜单项，只保留有权限的菜单
    const filteredMenu = res.data.filter(item => {
      // 检查一级菜单的权限
      const menuPermissions = menuPermissionMap[item.name] || []
      const hasMenuPermission = menuPermissions.some(permission => 
        userFunctions.includes(permission)
      )

      // 如果用户有该菜单的任何权限，显示整个菜单及其子菜单
      if (hasMenuPermission) {
        return true
      }
      return false
    })
    
    menuList.value = filteredMenu
  }
  
  onMounted(() => {
    getMenuList()
    activePath.value = window.sessionStorage.getItem('navState')
    username.value = JSON.parse(window.sessionStorage.getItem('userInfo'))?.username || ''
  })
  </script>

<style lang="scss" scoped>
  .logo_1 {
    width: 58px;
    height: 142px;
  }
  .title_1 {
    margin-left: 0px;
    font-size: 23px;
  }
</style>